import React, { useState, useEffect } from 'react';
import { Table, Button, Modal, Form, Input, message } from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';

const AdvertisingPage: React.FC = () => {
    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(false);
    const [visible, setVisible] = useState(false);
    const [form] = Form.useForm();

    useEffect(() => {
        fetchData();
    }, []);

    const fetchData = async () => {
        setLoading(true);
        // Fetch data from API or database
        // const response = await fetch('/api/advertising');
        // const data = await response.json();
        // setData(data);
        setLoading(false);
    };

    const handleAdd = () => {
        setVisible(true);
    };

    const handleEdit = (record: any) => {
        form.setFieldsValue(record);
        setVisible(true);
    };

    const handleDelete = (record: any) => {
        // Delete record from API or database
        // fetch(`/api/advertising/${record.id}`, { method: 'DELETE' })
        //   .then(response => response.json())
        //   .then(() => {
        //     message.success('Record deleted successfully');
        //     fetchData();
        //   });
    };

    const handleSave = () => {
        form.validateFields().then(values => {
            // Save form data to API or database
            // fetch('/api/advertising', { method: 'POST', body: JSON.stringify(values) })
            //   .then(response => response.json())
            //   .then(() => {
            //     message.success('Record saved successfully');
            //     form.resetFields();
            //     setVisible(false);
            //     fetchData();
            //   });
        });
    };

    const handleCancel = () => {
        form.resetFields();
        setVisible(false);
    };

    const columns = [
        { title: 'ID', dataIndex: 'id' },
        { title: 'Name', dataIndex: 'name' },
        { title: 'Description', dataIndex: 'description' },
        {
            title: 'Actions',
            render: (text: any, record: any) => (
                <>
                    <Button type="link" icon={<EditOutlined />} onClick={() => handleEdit(record)}>
                        Edit
                    </Button>
                    <Button type="link" icon={<DeleteOutlined />} onClick={() => handleDelete(record)}>
                        Delete
                    </Button>
                </>
            ),
        },
    ];

    return (
        <div>
            <Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>
                Add
            </Button>
            <Table columns={columns} dataSource={data} loading={loading} rowKey="id" />

            <Modal
                title="Add/Edit Advertising"
                open={visible}
                onOk={handleSave}
                onCancel={handleCancel}
            >
                <Form form={form} layout="vertical">
                    <Form.Item name="name" label="Name" rules={[{ required: true }]}>
                        <Input />
                    </Form.Item>
                    <Form.Item name="description" label="Description" rules={[{ required: true }]}>
                        <Input.TextArea />
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
};

export default AdvertisingPage;
